<template>
  <div>
    <div class="table-head">
      <div class="input-box">
        <span class="lable">商品编号:</span>
        <el-input
          v-model="productCode"
          class="input"
          placeholder="请输入商品编码"
          clearable
          @input="onQuery"
        />
      </div>
      <div>
        <div class="total-prices">总价：300</div>
        <div>优惠：100</div>
      </div>
      <div class="ones">找零</div>
      <div class="price">300.00</div>
    </div>

    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; height: 675px"
      highlight-current-row
      @selection-change="handleSelectionChange"
      @cell-dblclick="onCellDblclick"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="商品名称"
        property="name"
        width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="编号" property="code" width="120" />
      <el-table-column label="零售价" property="price" />
      <el-table-column label="会员价" property="vipPrice" />
      <el-table-column label="数量" property="amount">
        <template #default="scope">
          <span v-show="!scope.row.edit">{{ scope.row.amount }}</span>
          <el-input
            @blur="onEdit(scope)"
            @keyup.enter="onEdit(scope)"
            v-show="scope.row.edit"
            v-model="scope.row.amount"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="小计" property="total" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template #default="scope">
          <el-button type="danger" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue'
import { ElTable } from 'element-plus'
let productCode = ref('')

interface Goods {
  id: string
  name: string
  code: string
  price: string
  vipPrice: string
  amount: string
  total: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Goods[]>([])

const emits = defineEmits(['resultTabl'])
const toggleSelection = (rows?: Goods[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: Goods[]) => {
  multipleSelection.value = val
}

const stata = reactive({
  tableData: [
    {
      id: '44',
      name: '感冒药somienb22',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00'
    },
    {
      id: '66',
      name: '感冒药11',
      code: '20903909',
      vipPrice: '26.00',
      price: '30.00',
      amount: '1',
      total: '26.00'
    }
  ]
})
const { tableData } = toRefs(stata)

//全选
const toggleSelectionAll = () => {
  emits('resultTabl', tableData.value)
  tableData.value = []
}

//删除行
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}

//搜索
const onQuery = () => {
  let res = {
    id: '44',
    name: '感冒药somienb22',
    code: '20903909',
    vipPrice: '26.00',
    price: '30.00',
    amount: '1',
    total: '26.00'
  }
  tableData.value.unshift(res) //添加数据
}

//当某个单元格被双击击时会触发该事件
const onCellDblclick = (e: any) => {
  tableData.value.forEach((item: any) => {
    if (item.id == e.id) {
      item.edit = !item.edit
    }
  })
}

//编辑数据
const onEdit = (e: any) => {
  console.log(e, '====编辑数据======')
}

defineExpose({
  toggleSelectionAll
})
</script>

<style lang="scss" scope>
.table-head {
  display: flex;
  width: 100%;
  padding: 20px 10px;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  .input-box {
    display: flex;
    justify-content: content;
    align-items: content;
    flex: 0 0 600px;
    .lable {
      font-size: 14px;
      display: flex;
      width: 80px;
      line-height: 50px;
    }
  }
  .total-prices {
    padding-bottom: 10px;
  }
  .ones {
    font-size: 30px;
    font-weight: bold;
  }
  .price {
    color: red;
    text-align: left;
    min-width: 180px;
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
